<template>
<l-layout class="l-tab-page" :left="200">
    <template #left>
        <l-panel :title="$t('代码结构')" style="padding-right:0;padding-top:0;padding-bottom:0;" >
            <el-tree  ref="tree"
                node-key="id" 
                :highlight-current="true"  
                :data="codePathTree" 
                default-expand-all 
                show-checkbox
                :default-checked-keys="['index','form','api','list','query','single']"
                
                @node-click="handleNodeClick">
                <span class="lr-tree-node"  slot-scope="{ node }">
                    {{ node.label }}
                </span>
            </el-tree>
        </l-panel>
    </template>
    <l-panel style="padding-left:0;padding-top:0;padding-bottom:0;" :title="pathTtile">
        <l-code-mirror :readOnly="true" :value="content" :mode="mode" ></l-code-mirror>
    </l-panel>
</l-layout>
</template>
<script>
const api = window.$api.codetool.project

import {generatorIndex} from '../../../generator/generatorIndex'
import {generatorForm} from '../../../generator/generatorForm'
import {generatorAppList} from '../../../generator/generatorAppList'
import {generatorAppQuery} from '../../../generator/generatorAppQuery'
import {generatorAppSingle} from '../../../generator/generatorAppSingle'

export default {
    data(){
        return {
            codePathTree:[],
            selectCode:'',
            code:{}
        };
    },
    computed:{
        pathTtile(){
            if(!this.$validatenull(this.selectCode) && !this.$validatenull(this.code[this.selectCode])){
                return this.code[this.selectCode].path;
            }
            else{
                return '请选择预览代码'
            }
        },
        content(){
            let res =''
            if(this.selectCode){
                const code = this.code[this.selectCode]
                if(code){
                    res = code.content
                }
            }
            return res
        },
        mode(){
            let res ='text/x-vue'
            if(this.selectCode){
                const code = this.code[this.selectCode]
                if(code && code.type){
                    res = code.type
                }
            }
            return res
        }
    },
    created () {
    },

    methods:{
        async generatorCode(option){
            console.log(option,'option')
            // 代码生成
            this.code = {}
            const codeTree = []//this.$deepClone(option.codeTree)
            let isPc = false
            if(option.menu.isPC){
                let tempIndex = await this.$awaitWraper(api.getCodeTemp(`index.vue`))
                this.code.index = {
                    path:`${this.project.f_PCWeb}/src/modules/${this.$lowerFirst(option.moduleId)}/views/${this.$lowerFirst(option.name)}/index.vue`,
                    content: generatorIndex(option,tempIndex)
                }

                let tempForm = await this.$awaitWraper(api.getCodeTemp(`form.vue`))
                this.code.form = {
                    path:`${this.project.f_PCWeb}/src/modules/${this.$lowerFirst(option.moduleId)}/views/${this.$lowerFirst(option.name)}/form.vue`,
                    content: generatorForm(option,tempForm)
                }

                let tempApi = await this.$awaitWraper(api.getCodeTemp(`api.js`))
                this.code.api = {
                    path:`${this.project.f_PCWeb}/src/modules/${this.$lowerFirst(option.moduleId)}/api/${this.$lowerFirst(option.name)}.js`,
                    content: tempApi,
                    type:'application/javascript'
                }
                option.codeTree[0].children[2].label = `${this.$lowerFirst(option.name)}.js`

                let tempWf = await this.$awaitWraper(api.getCodeTemp(`wf.js`))
                this.code.wf = {
                    path:`${this.project.f_PCWeb}/src/modules/${this.$lowerFirst(option.moduleId)}/views/${this.$lowerFirst(option.name)}/wf.js`,
                    content: tempWf.replace(new RegExp(`\\$\\$WFNAME?`, 'g'),`${option.moduleId}_${option.name}`),
                    type:'application/javascript'
                }

                codeTree.push(option.codeTree[0]) 

                isPc = true
            }

            // 移动端代码生成
            if(option.menu.isApp){
                // 列表
                let tempAppList = await this.$awaitWraper(api.getCodeTemp(`list.vue`))
                this.code.list = {
                    isApp:true,
                    name:option.des,
                    route:`${this.$lowerFirst(option.name)}/list`,
                    path:`${this.project.f_App}/pages${this.$upFirst(option.moduleId)}/${this.$lowerFirst(option.name)}/list.vue`,
                    content: generatorAppList(option,tempAppList)
                }

                // 查询页面
                let tempAppQuery = await this.$awaitWraper(api.getCodeTemp(`query.vue`))
                this.code.query = {
                    isApp:true,
                    isQuery:true,
                    name:'查询条件',
                    route:`${this.$lowerFirst(option.name)}/query`,
                    path:`${this.project.f_App}/pages${this.$upFirst(option.moduleId)}/${this.$lowerFirst(option.name)}/query.vue`,
                    content: generatorAppQuery(option,tempAppQuery)
                }

                // 表单页面
                let tempAppSingle = await this.$awaitWraper(api.getCodeTemp(`single.vue`))
                this.code.single = {
                    isApp:true,
                    name:'表单页面',
                    route:`${this.$lowerFirst(option.name)}/single`,
                    path:`${this.project.f_App}/pages${this.$upFirst(option.moduleId)}/${this.$lowerFirst(option.name)}/single.vue`,
                    content: generatorAppSingle(option,tempAppSingle)
                }

                 codeTree.push(option.codeTree[1]) 
            }


           
            
            this.selectCode = ''
            this.$nextTick(()=>{
                if(isPc){
                    this.selectCode = 'index'
                }
                else{
                    this.selectCode = 'list'
                }
                
            })

            this.codePathTree =codeTree //option.codeTree
        },
        handleNodeClick(node){
            if(this.code[node.id]){
                this.selectCode = node.id
            }
        },
        getCode(){
            const checkeds = this.$refs.tree.getCheckedKeys()
            const list = []
            for(let id in this.code){
                if(checkeds.indexOf(id) != -1){
                    list.push(this.code[id])
                }
            }
            return list
        }
    }
}
</script>
